<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 网站信息管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <i class="el-icon-lx-sort"></i> 校友活动管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除
                </el-button>
                <el-input placeholder="输入活动名称关键词"
                          v-model="search"
                          @clear="getData(1,10)"
                          clearable
                          @keyup.enter.native="handleSearch"
                          class="handle-input mr10">
                </el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    :data="activities"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="activityId" label="ID" width="55" align="center"></el-table-column>
                <el-table-column show-tooltip-when-overflow width="250" label="活动名称" align="center">
                    <template slot-scope="scope">
                        <router-link :to="{path: '/activityDetails', query: {activityId: scope.row.activityId}}">
                            {{scope.row.activityName}}
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="activityTime" label="活动时间" width="150" align="center"></el-table-column>
                <el-table-column prop="address" label="活动地点" show-tooltip-when-overflow max-width="200"></el-table-column>
                <el-table-column prop="limitPerson" label="人数限制" align="center"></el-table-column>
                <el-table-column prop="views" label="浏览量" align="center"></el-table-column>
                <el-table-column label="创建人" width="120">
                    <template slot-scope="scope">
                        {{scope.row.createOne.nick}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="170"></el-table-column>
                <el-table-column label="更新者" width="120">
                    <template slot-scope="scope">
                        {{scope.row.updateOne ? scope.row.updateOne.nick : '暂无更新'}}
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" width="170">
                    <template slot-scope="scope">
                        {{scope.row.updateTime ? scope.row.updateTime : '暂无更新'}}
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.state=== 1 ?'success':'danger'"
                        >{{scope.row.state === 1 ? '正在显示' : '已隐藏'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attentionforbid"
                                v-show="scope.row.state===1"
                                style="color: #97a8be; margin-left: 10px"
                                @click="changeState(scope.$index, scope.row)"
                        >隐藏
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-lx-attention"
                                v-show="scope.row.state!==1"
                                style="color: #00a854"
                                @click="changeState(scope.$index, scope.row)"
                        >显示
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="addButt">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="current"
                        :page-size="size"
                        :total="total"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { getRequest, postRequest } from '../../api/index';
    import {getTime} from '../../utils/dateTimeUtil';

    export default {
        name: 'Activity',
        data() {
            return {
                activities: [],
                multipleSelection: [],
                total: 0,
                size: 0,
                current: 1,
                form: {},
                idx: -1,
                baseUrl: 'http://localhost:8888',
                search: '',
                currentUserId: Number(sessionStorage.getItem('userId')),
                currentUserNick: sessionStorage.getItem('userNick')
            };
        },
        created() {
            this.getData(1, 10);
        },
        inject: ['reload'],
        watch: {
            search(){
                if(this.search===''){
                    this.getData(1, 10);
                }
            }
        },
        methods: {
            getData(current, size) {
                const params = { current: current, size: size };
                getRequest('/getActivityList', params).then(resp => {
                    if (resp) {
                        this.total = resp.total;
                        this.current = resp.current;
                        this.size = resp.size;
                        this.activities = resp.list;
                    } else {
                        console.log('获取活动列表失败');
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                if(this.search===''){
                    this.$message('搜索内容不能为空');
                    return false;
                }
                const params={
                    keyword: this.search,
                    current: 1,
                    size: 10
                };
                getRequest('/searchActivities', params).then(resp=>{
                    this.total = resp.total;
                    this.current = resp.current;
                    this.size = resp.size;
                    this.activities = resp.list;
                });
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要永久删除 "'+row.activityName+'" 这个校友活动吗？', '提示', {
                    type: 'error'
                }).then(() => {
                    postRequest('/deleteActivity', { activityId: row.activityId}).then(resp=>{
                        if(resp==='success'){
                            this.$message.success('删除成功');
                            this.activities.splice(index, 1);
                        }
                    })
                });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delAllSelection() {
                const length = this.multipleSelection.length;
                if(length===0){
                    this.$message("请选择要删除的校友活动");
                    return false;
                }
                const deleteList = [];
                this.multipleSelection.forEach(item=>{
                    deleteList.push(item.activityId);
                });
                this.$confirm('确定要永久删除这 '+length+' 个校友活动吗？', '警告',{type: 'warning'}).then(()=>{
                    postRequest('/deleteActivities', {deleteList: deleteList}).then(resp=>{
                        if(resp==='success'){
                            this.$message.error(`已删除 ${length} 个校友活动！`);
                            this.multipleSelection = [];
                            this.reload();
                        }
                    })
                })
            },
            changeState(index, row){
                this.idx=index;
                this.form=row;
                if(this.form.state===1){
                    this.form.state=0;
                }else{
                    this.form.state=1;
                }
                this.form.updateOne={nick: this.currentUserNick};
                const date=new Date();
                this.form.updateTime=getTime(date);
                const params={
                    activityId: this.form.activityId,
                    state: this.form.state,
                    currentUserId: this.currentUserId,
                    updateTime: date.getTime()
                };
                postRequest('/changeActivityState', params).then(resp=>{
                    if(resp==='success'){
                        this.form.state===1 ?
                            this.$message.success('校友活动已设置为可见！')
                            :
                            this.$message('校友活动已设置为不可见');
                    }else{
                        this.$message.error('操作失败！');
                    }
                });
                this.$set(this.activities, this.idx, this.form);
            },
            // 编辑操作
            handleEdit(index, row) {
                this.$router.push({
                    path: '/activityEdit',
                    query: {
                        activityId: row.activityId
                    }
                })
            },
            handleAdd(){
                this.$router.push({
                    path: '/activityEdit',
                    query: {
                        isAdd: true
                    }
                })
            },
            // 分页导航
            handlePageChange(val) {
                this.getData(val, this.size);
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }
    .table td{
        max-height: 100px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .addButt{
        margin-top: 15px;
    }
    a{
        color: black;
    }
</style>
